<template>
  <div class="blog-navbar" >

    <router-link style="text-decoration-line: none;color: white" to="/">
      <h3 class="ui header item m-blue" style="display: inline;padding:20px 20px 20px 60px">Hots Top</h3>
    </router-link>

    <router-link class="item" style="text-decoration-line: none;color: white;padding:20px;"
                 to="/">
      首页
    </router-link>


    <router-link class="item" style="text-decoration-line: none;color: white;padding:20px"
                 to="/query">
      查询
    </router-link>


    <router-link  class="item" style="text-decoration-line: none;color: white;padding:20px"
                 to="/chart">
      图表
    </router-link>

    <router-link  class="item" style="text-decoration-line: none;color: white;padding:20px"
                 to="/more">
      更多热榜
    </router-link>

    <router-link class="item" style="text-decoration-line: none;color: white;padding:20px;"
                 to="/search">
      搜索
    </router-link>

    <router-link  class="item" style="text-decoration-line: none;color: white;padding: 20px"
                 to="/about">
      评论和建议
    </router-link>

    <!--自带防抖-->
    <el-autocomplete  v-model="queryString"  :fetch-suggestions="debounceQuery"
                      placeholder="请输入内容" popper-class="m-search-item" style="margin-left: 500px; position:absolute;"
                      suffix-icon="el-icon-search">
      <template slot-scope="{ item }">
        <a :href="item.url" target="_blank" style="color:black;text-decoration-line: none">
          <div class="topic">{{ item.topic }}</div>
          <span class="hot">{{ item.hot }}</span>
        </a>
      </template>
    </el-autocomplete>

    <!-- 头像 -->
    <el-dropdown v-if="this.token!=='' &&this.userInfo!== null    " class="user" trigger="click" @command="logout" style="margin-left: 750px; position:absolute;">
      <div class="el-dropdown-link">
        <el-avatar :size="40" :src="avatar" fit="contain" shape="circle"></el-avatar>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="ali-iconfont icon-logout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <router-link  v-if="this.token==='' || this.userInfo=== null  " class="item" style="text-decoration-line: none;color: white;margin-left: 750px; padding: 10px;position:absolute;"
                  to="/login"  >
      登录
    </router-link>

  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "Navbar",
  data() {
    return {
      types: {},
      input: '',
      queryString: '',
      queryResult: [],
      timer: null,
      mobileHide: false,
      ifShowInput: false,
      avatar:'',
    };
  },
  mounted() {
    const _this = this
    if (this.token!=='' && this.userInfo!==null  ){
      console.log(this.userInfo)
      _this.avatar='http://localhost:8181'+this.userInfo.avatar
    }
    // else {
    //   _this.avatar='http://localhost:8181/profile/avatar/2022/02/23/4991869b-df26-407b-a0d8-19da8110da34.jpeg'
    // }
  },
  computed:{
    ...mapState(['userInfo','token']),
  },
  methods: {
    //登出
    logout() {
      const _this = this
      this.$axios.get(this.$base_url+'logout').then((res) => {
        _this.$store.commit('REMOVE_INFO')
        _this.$store.commit('REMOVE_INFO')
        _this.$router.push('login')
      });

    },
    //防抖
    debounceQuery(queryString, callback) {
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => this.querySearchAsync(queryString, callback), 1000)
    },
    querySearchAsync(queryString, callback) {
      if (queryString == null
          || queryString.trim() === ''
          || queryString.indexOf('%') !== -1
          || queryString.indexOf('_') !== -1
          || queryString.indexOf('[') !== -1
          || queryString.indexOf('#') !== -1
          || queryString.indexOf('*') !== -1
          || queryString.trim().length > 20) {
        return
      }

      const _this = this
      this.$axios.get(this.$base_url+'search?queryString=' + _this.queryString).then((res) => {
        _this.queryResult=[]
        for (let result in res.data.data){
          if (res.data.data[result].length!=0){

            _this.queryResult.push(res.data.data[result])
          }
        }
        if (_this.queryResult.length === 0) {
          _this.queryResult.push({topic: '无相关搜索结果'})
        }


        console.log(_this.queryResult)
        callback(_this.queryResult)


      }).catch(() => {
        this.$message({
          message: '请求失败！',
          type: 'warning'
        });
      })


    },

  },

}
</script>

<style scoped>


::v-deep .el-dropdown-link {
  outline-style: none !important;
  outline-color: unset !important;
  height: 100%;
  cursor: pointer;
}

.blog-navbar {
  height: 50px;
  padding-top:  20px;
  background-color: #333333;
  margin-left: auto !important;
  margin-right: auto !important;
}







.m-search input {
  color: rgba(255, 255, 255, .9);;
  border: 0px !important;
  background-color: inherit;



}

.m-search i {
  color: rgba(255, 255, 255, .9) !important;
}




.m-search-item li {
  line-height: normal !important;
  padding: 8px 10px !important;
  width: 1000px;


}

.m-search-item li .topic {
  text-overflow: ellipsis;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.87);
}

.m-search-item li .hot {
  text-overflow: ellipsis;
  font-size: 12px;
  color: rgba(0, 0, 0, .70);
}


</style>

